<template>
  <div>
    <div class="myStyle myMain" v-if="isEcharts">
      <div class="stroke box_l">
        <StrokeDetial style="height: 27.5%" title="七率统计分析" url="index/seven">
          <div class="flex_center">
            <ElementRadio :isButton="true" v-model="model" @change="radioChange" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" />
          </div>
          <div class="Echarts table size">
            <el-table :data="left1" border>
              <el-table-column align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.type }}</span>
                </template>
              </el-table-column>
              <el-table-column label="瓶坯" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.type == '内控'">
                    <p>{{ scope.row.pp || 0 }}</p>
                  </div>
                  <div v-else>
                    <div class="flex_center table_cell" v-if="left1[1].pp < left1[0].pp">
                      <p class="text_shadow">{{ scope.row.pp || 0 }}</p>
                      <img src="@/assets/images/echarts/jiang1.png" alt="" />
                    </div>
                    <div class="flex_center table_cell" v-else-if="left1[1].pp > left1[0].pp">
                      <p class="text_shadow_danger">{{ scope.row.pp || 0 }}</p>
                      <img src="@/assets/images/echarts/sheng1.png" alt="" />
                    </div>
                    <div class="flex_center table_cell" v-else>
                      <p class="text_shadow_yellow">{{ scope.row.pp || 0 }}</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="瓶盖" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.type == '内控'">
                    <p>{{ scope.row.pg || 0 }}</p>
                  </div>
                  <div v-else>
                    <div class="flex_center table_cell" v-if="left1[1].pg < left1[0].pg">
                      <p class="text_shadow">{{ scope.row.pg || 0 }}</p>
                      <img src="@/assets/images/echarts/jiang1.png" alt="" />
                    </div>
                    <div class="flex_center table_cell" v-else-if="left1[1].pg > left1[0].pg">
                      <p class="text_shadow_danger">{{ scope.row.pg || 0 }}</p>
                      <img src="@/assets/images/echarts/sheng1.png" alt="" />
                    </div>
                    <div class="flex_center table_cell" v-else>
                      <p class="text_shadow_yellow">{{ scope.row.pg || 0 }}</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="商标" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.type == '内控'">
                    <p>{{ scope.row.sb || 0 }}</p>
                  </div>
                  <div v-else>
                    <div class="flex_center table_cell" v-if="left1[1].sb < left1[0].sb">
                      <p class="text_shadow">{{ scope.row.sb || 0 }}</p>
                      <img src="@/assets/images/echarts/jiang1.png" alt="" />
                    </div>
                    <div class="flex_center table_cell" v-else-if="left1[1].sb > left1[0].sb">
                      <p class="text_shadow_danger">{{ scope.row.sb || 0 }}</p>
                      <img src="@/assets/images/echarts/sheng1.png" alt="" />
                    </div>
                    <div class="flex_center table_cell" v-else>
                      <p class="text_shadow_yellow">{{ scope.row.sb || 0 }}</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </StrokeDetial>
        <StrokeDetial style="height: 36%" title="产量统计分析" url="index/capacityDesign">
          <div class="flex_center_direction" style="width: 100%; height: 92%; margin-top: 4%">
            <div class="cnfx_box flex_center">
              <!-- <img src="@/assets/images/echarts/ri.png" alt="" class="" /> -->
              <div class="content flex_center_direction">
                <div class="title">当日产量</div>
                <div class="number text_shadow">
                  <p v-for="(item,index) in left2.dayBotleCount" :key="index" class="p-number" :class="item=='.' ? 'noborder': '' ">{{item}}</p>
                  <p class="p-number noborder text_shadow" style="color:#3bffe6;margin-left:3px"> 瓶</p>
                </div>
              </div>
            </div>
            <div class="cnfx_box flex_center">
              <!-- <img src="@/assets/images/echarts/ri.png" alt="" class="" /> -->
              <div class="content flex_center_direction">
                <div class="title">当日产量</div>
                <div class="number text_shadow">
                  <p v-for="(item,index) in left2.dayBotleCountPing" :key="index" class="p-number" :class="item=='.' ? 'noborder': '' ">{{item}}</p>
                  <p class="p-number noborder text_shadow" style="color:#3bffe6;margin-left:3px"> 标准箱</p>
                </div>
              </div>
            </div>
            <div class="cnfx_box flex_center">
              <!-- <img src="@/assets/images/echarts/yue.png" alt="" class="" /> -->
              <div class="content flex_center_direction">
                <div class="title">当月累计产量</div>
                <div class="number text_shadow">
                  <!-- <p v-for="(item,index) in [8,4,0,0,7]" :key="index" class="p-number" :class="item=='.' ? 'noborder': '' ">{{item}}</p> -->
                  <p v-for="(item,index) in left2.monthBoxCount" :key="index" class="p-number" :class="item=='.' ? 'noborder': '' ">{{item}}</p>
                  <p class="p-number noborder text_shadow" style="color:#3bffe6;margin-left:3px"> 标准箱</p>
                </div>
              </div>
            </div>
            <div class="cnfx_box flex_center">
              <!-- <img src="@/assets/images/echarts/yue.png" alt="" class="" /> -->
              <div class="content flex_center_direction">
                <div class="title">当月累计产量</div>
                <div class="number text_shadow">
                  <!-- <p v-for="(item,index) in [7,2,0,'.',1,2]" :key="index" class="p-number" :class="item=='.' ? 'noborder': '' ">{{item}}</p> -->
                  <p v-for="(item,index) in left2.monthWaterUseCount" :key="index" class="p-number" :class="item=='.' ? 'noborder': '' ">{{item}}</p>
                  <p class="p-number noborder text_shadow" style="color:#3bffe6;margin-left:3px"> 吨</p>
                </div>
              </div>
            </div>
          </div>
        </StrokeDetial>
        <StrokeDetial style="height: 36.4%" title="生产计划进度分析" url="index/productionDesign">
          <!-- <Yibiaopan/> -->
          <div class="scjhjd_box flex_center_direction">
            <div class="yibiaopan">
              <div class="yibiaopan_bg" :style="{ width: 78*Number(left3.allRate)/100 + 'px' }" style="maxWidth:78px"></div>
              <img src="@/assets/images/echarts/biaopan.png" alt="" />
              <div class="yibiaopan_nummber text_shadow">
                {{ left3.monthRate }}%
              </div>
              <div class="type">&lt; 当月 &gt;</div>
            </div>
            <div class="water_box flex_between">
              <div class="water_box_item">
                <div class="water_box_item_bg flex_center">
                  <Water :number="left3.monthRate" backgroundColor="#093b76" waterColor="rgba(255,92,238,0.5)" textColor="rgba(255,92,238,1)" width="106" textSize="14" />
                </div>
                <div class="type" style="color: rgba(255, 92, 238, 1)">
                  &lt; 当月计划 &gt;
                </div>
              </div>
              <div class="water_box_item">
                <div class="water_box_item_bg water_box_item_bg2 flex_center">
                  <Water :number="left3.quarterRate" backgroundColor="#093b76" waterColor="rgba(255,255,78,0.5)" textColor="rgba(255,255,78,1)" width="106" textSize="14" />
                </div>
                <div class="type" style="color: rgba(255, 255, 78, 1)">
                  &lt; 当季计划 &gt;
                </div>
              </div>
              <!-- <div class="water_box_item">
                <div class="water_box_item_bg water_box_item_bg3 flex_center">
                  <Water :number="left3.allRate" backgroundColor="#093b76" waterColor="rgba(76,207,246,0.5)" textColor="rgba(76,207,246,1)" width="106" textSize="14" />
                </div>
                <div class="type" style="color: rgba(76, 207, 246, 1)">
                  &lt; 全部计划 &gt;
                </div>
              </div> -->
            </div>
          </div>
        </StrokeDetial>
      </div>
      <div class="box_c">
        <div class="day-box flex_center">
          <span> 安全生产天数</span>
          <div class="number-box">
            <p v-for="(it,ind) in safeDate" :key="ind" class="p-number">{{it}}</p>
          </div>
          <span>天</span>
        </div>
        <div class="flex_between" style="width: 100%; height: 63%; overflow: hidden; position: relative;">
          <Map @openMap="isMap=true;mapInfo=$event" />
          <div class="mapInfo" v-if="isMap">
            <div class="top">
              <nav> {{mapInfo.title||'--'}}</nav>
              <div class="close" @click="isMap=false">X</div>
              <img src="../../assets/images/mapbor.png" alt="" class="border">
            </div>
            <div class="content">
              <div>
                <p class="label" style="width:55px">地址</p>
                <p class="value">
                  {{mapInfo.address||'--'}}
                </p>
              </div>
              <div class="flex_center" style=" position: relative;
          top: -5px;">
                <div style="width:33%">
                  <p class="label" style="width:55px">资金</p>
                  <p class="value">
                    {{mapInfo.fundNum||'--'}}
                  </p>
                </div>
                <div style="width:33%">
                  <p class="label" style="width:55px">人数</p>
                  <p class="value" style="width:55px;text-align: center;">
                    {{mapInfo.peopleNum||'--'}}
                  </p>
                </div>
                <div style="width:33%">
                  <p class="label" style="width:55px">规模</p>
                  <p class="value" style="width:55px;text-align: center;">
                    {{mapInfo.scale||'--'}}
                  </p>
                </div>

              </div>
              <div style="display:flex;position: relative;
          top: -10px;">
                <div style="width:33%">
                  <p class="label" style="width:55px">负责人</p>
                  <p class="value">
                    {{mapInfo.leader||'--'}}
                  </p>
                </div>
                <div style="width:33%">
                  <p class="label" style="width:75px">联系方式</p>
                  <p class="value">
                    {{mapInfo.phone||'--'}}
                  </p>
                </div>
              </div>
              <div style="position: relative;
          top: -25px;">
                <div style="width:33%">
                  <p class="label" style="width:55px">图片</p>
                  <img class="imgInfo" :src="mapInfo.pic" alt="">
                </div>

              </div>
            </div>
          </div>
        </div>
        <div class="flex_between" style="width: 100%; height: 37%; position: relative; z-index: 999">
          <StrokeDetial style="height: 100%; width: 100%" title="电力仪表监控分析" class="stroke" url="index/lcd">
            <div class="flex_center">
              <ElementSelect ref="psNameSelect" :isFilterable="false" :isSelected="true" @select="selectList1" :isAll="false" :settings="{
                  placeholder: '请选择',
                  isSelected: true,
                  isMultiple: false,
                  label: 'dev',
                  value: 'id',
                }" url="Productionline/interfaceTag/getDev" :isClearable="false" />
              <!-- <el-select v-model="value" placeholder="请选择" style="width:180px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select> -->
            </div>
            <div class="flex_center Echarts dlybjk">
              <div class="zyg">
                <div class="zyg_top">{{ center[0].value }}</div>
                <div class="dlybjk_bottom">{{ center[0].type }}（KW·h）</div>
              </div>
              <div class="zwg">
                <div class="zwg_top">{{ center[1].value }}</div>
                <div class="dlybjk_bottom">{{ center[1].type }}（KW）</div>
              </div>
              <div class="pl">
                <div class="pl_top">{{ center[2].value }}</div>
                <div class="dlybjk_bottom">{{ center[2].type }}</div>
              </div>
              <div class="zwg">
                <div class="zwg_top">{{ center[3].value }}</div>
                <div class="dlybjk_bottom">{{ center[3].type }}（KW·h）</div>
              </div>
            </div>
          </StrokeDetial>
          <!-- <StrokeDetial
          style="height: 100%; width: 49.5%"
          title="当月电力设备异常统计"
          class="stroke"
        >
          <div class="dyyctj_box flex_center">
            <div class="dyyctj_content">
              <img
                class="center_img"
                src="@/assets/images/echarts/dlsb.png"
                alt=""
              />
              <div class="dyyctj_item dyyctj_item_odd">
                <img
                  class=""
                  src="@/assets/images/echarts/yichang.png"
                  alt=""
                />
                <div class="dyyctj_item_content flex_between_direction">
                  <div class="title">异常次数</div>
                  <CountTo3 class="countTo" />
                </div>
              </div>
              <div class="dyyctj_item">
                <img
                  class=""
                  src="@/assets/images/echarts/wendu_orange.png"
                  alt=""
                />
                <div class="dyyctj_item_content flex_between_direction">
                  <div class="title">温度异常次数</div>
                  <CountTo3 class="countTo" color="rgba(255,153,0,0.4)" />
                </div>
              </div>
              <div class="dyyctj_item dyyctj_item_odd">
                <img
                  class="bottom"
                  src="@/assets/images/echarts/dianya.png"
                  alt=""
                />
                <div class="dyyctj_item_content flex_between_direction">
                  <div class="title">电压异常次数</div>
                  <CountTo3 class="countTo" color="rgba(255,153,0,0.4)" />
                </div>
              </div>
              <div class="dyyctj_item">
                <img
                  class="bottom"
                  src="@/assets/images/echarts/dianliu.png"
                  alt=""
                />
                <div class="dyyctj_item_content flex_between_direction">
                  <div class="title">电流异常次数</div>
                  <CountTo3 class="countTo" />
                </div>
              </div>
            </div>
          </div>
        </StrokeDetial> -->
        </div>
      </div>
      <div class="stroke box_r">
        <StrokeDetial style="height: 38%" title="温湿度统计分析">
          <div class="flex_center wsd_box">
            <div class="item flex_between" v-for="(item, index) in arr" :key="index">
              <div class="wsd_item_left">{{ item.name }}</div>
              <div class="wsd_item_right">
                <div class="wsd_item_right_item flex_between">
                  <div class="number">{{ item.wd }}℃</div>
                </div>
                <div class="wsd_item_right_item flex_between">
                  <div class="number">{{ item.sd }}%</div>
                </div>
              </div>
            </div>
            <!-- <div class="content">
              <div class="wsd_item flex_between" v-for="(item, index) in arr" :key="index">
                <div class="wsd_item_left">{{ item }}</div>
                <div class="wsd_item_right">
                  <div class="wsd_item_right_item">
                    <div class="number">{{ hum.wd }}℃</div>
                    <div class="title">温度</div>
                  </div>
                  <div class="wsd_item_right_item">
                    <div class="number">{{ hum.sd }}%</div>
                    <div class="title">湿度</div>
                  </div>
                </div>
              </div>
            </div> -->
          </div>
        </StrokeDetial>
        <StrokeDetial style="height: 33%" title="能耗数据分析" url="index/energy">
          <!-- <div class="flex_center">
            <ElementSelect ref="psNameSelect" :isSelected="true" @select="selectList1" />
          </div> -->
          <div class="flex_center_direction Echarts" style="height:92%">
            <div class="nhsj_item flex_between" v-for="(item, index) in mhsjfxData" :key="index">
              <div class="img_box">
                <!-- <img :src="item.img" alt="" /> -->
                <div class="title">
                  {{ item.name }}
                </div>
              </div>
              <div class="nhsj_item_right">
                <p v-for="(it,ind) in item.num" :key="ind" class="p-number " :class="[it=='.' ? 'noborder': '' ,'p-number-'+index]">{{it}}</p>
                <div class="unit">
                  {{ item.unit }}
                </div>
              </div>
            </div>
          </div>
        </StrokeDetial>

        <StrokeDetial style="height: 29%" title="产线设备监控分析">
          <div class="statusBox flex_center" :data="right3">
            <StatusBox class="item" :data="{ name: '吹灌旋一体机', status: right3.YK_BBM_DG_ST_JW }" />
            <StatusBox class="item" :data="{ name: '码垛机', status: right3.YK_YQMD_DG_ST_TJ }" />
            <StatusBox class="item" :data="{ name: '水处理', status: right3.YK_WT_DG_ST_RUN }" />
          </div>
        </StrokeDetial>
      </div>
    </div>
    <div id="loader-wrapper" v-else>
      <div id="loader"></div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
      <div class="load_title">正在加载系统资源，请耐心等待</div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { GetVal } from "@/api/parcel/index.js"; //电力仪表监控分析
import Map from "@/components/map/index";
import CountTo3 from "@/components/chartNum/index3.vue"; //数字递增
import StatusBox from "@/components/myComponents/status/index.vue"; //状态
import Yibiaopan from "@/components/echarts/pie/yibiaopan.vue"; //仪表盘
import { list } from "@/api/dialog/index";
import { getInfo } from "@/api/login";
import {
  ProductRecordCount,
  ProductPlanCount,
  ProductionProcess,
  humiture,
  energySy,
  electricDay,
  electricMonth,
  getTag,
  getEnergyDay,
  getEnergyMonth,
  GetBottleDay,
  GetBoxDay,
  getRealWsd,
  SafeP,
} from "@/api/echarts/index";
export default {
  components: {
    CountTo3,
    StatusBox,
    Yibiaopan,
    Map,
  },
  name: "Index",
  computed: {
    ...mapGetters(["topbarRouters"]),
  },
  data() {
    return {
      options: [
        {
          value: "1",
          label: "码垛机",
        },
        {
          value: "2",
          label: "吹瓶机",
        },
      ],
      value: "1",
      model: "lastMonth",
      left1: [
        {
          type: "内控",
          pp: 0,
          pg: 0,
          sb: 0,
        },
        {
          type: "实际",
          pp: 0,
          pg: 0,
          sb: 0,
        },
      ],
      //产量统计分析
      left2: {
        dayBotleCount: [0],
        dayBotleCountPing: [0],
        monthBoxCount: [0],
        monthWaterUseCount: [0],
      },
      //生产计划进度分析
      left3: {
        monthRate: 0,
        quarterRate: 0,
        allRate: 0,
      },
      left1Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
      },
      //安全生产天数
      safeDate: [0],
      mhsjfxData: [
        {
          name: "当日电能消耗",
          img: require("@/assets/images/echarts/dian.png"),
          unit: "KW·h",
          num: [0],
        },
        {
          name: "当月电能消耗",
          img: require("@/assets/images/echarts/dian.png"),
          unit: "KW·h",
          num: [0],
        },
        {
          name: "当日水能消耗",
          img: require("@/assets/images/echarts/shui3.png"),
          unit: "吨(T)",
          num: [0],
        },
        {
          name: "当月水能消耗",
          img: require("@/assets/images/echarts/shui3.png"),
          unit: "吨(T)",
          num: [0],
        },
      ],
      // 温湿度
      hum: {
        wd: 0,
        sd: 0,
      },
      // arr: ["吹瓶机", "灌装机", "成品库", "材料库"],
      // 温湿度
      // arr: ["吹瓶机", "灌装机", "成品库", "材料库"],
      // arr: [
      //   { name: "吹瓶机", wd: 16.4, sd: 56.8 },
      //   { name: "灌装机", wd: 24.7, sd: 49.2 },
      //   { name: "成品库", wd: 11.2, sd: 66.4 },
      //   { name: "材料库", wd: 11.4, sd: 61.2 },
      // ],
      arr: [
        { name: "吹瓶机", wd: 0, sd: 0 },
        { name: "灌装机", wd: 0, sd: 0 },
        { name: "成品库", wd: 0, sd: 0 },
        { name: "材料库", wd: 0, sd: 0 },
      ],
      center: [
        { type: "总有功功率", value: 0 },
        { type: "总无功功率", value: 0 },
        { type: "总无功功率", value: 0 },
        { type: "功率因数", value: 0 },
      ], //电力仪表监控分析
      right3: {
        YK_BBM_IN_ST_RUN: 0, //吹罐装
        YK_YQMD_DG_ST_TJ: 0, //码垛机
        YK_WT_DG_ST_RUN: 0, //水处理
      }, //产线设备监控分析
      centerId: null,
      /* 是否有看板 */
      isEcharts: false,
      timer: null,
      timer2: null,
      menus: [],
      menusIndex: 0,
      //地图是否显示
      isMap: false,
      //地图信息
      mapInfo: {
        title: "",
        address: "",
        peopleNum: "",
        scale: "",
        fundNum: "",
        leader: "",
        phone: "",
        pic: "",
      },
    };
  },
  // beforeDestroy() {
  //   if (this.timer) {
  //     clearInterval(this.timer);
  //   }
  //   if (this.timer2) {
  //     clearInterval(this.timer2);
  //   }
  // },
  activated() {
    this.echartsFun("1");
  },
  created() {
    this.echartsFun("2");
  },
  deactivated() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.timer2) {
      clearInterval(this.timer2);
    }
  },
  methods: {
    /* 判断是否有看板 */
    echartsFun(val) {
      let temp = 0;
      for (let item of this.topbarRouters) {
        if (item.path == "/index") {
          temp++;
        }
      }
      if (temp > 0) {
        //首页-产量统计
        this.productRecordCount();
        this.productPlanCount();
        this.productionProcess();
        this.humiture(); // 温湿度统计分析
        this.getList(); //获取设备列表
        this.energySys();
        this.getTag(); //产线设备监控分析
        this.getBottleDay();
        this.energySys2();
        this.getBoxDay();
        this.getRealWsd();
        if (val == "1") {
          if (this.timer2) {
            clearInterval(this.timer2);
          }
          this.timer2 = setInterval(() => {
            this.getBottleDay();
            this.getBoxDay();
            this.energySys2();
            this.energySys();
            this.getRealWsd();
            // this.energySys();
          }, 10000);
        }
        this.isEcharts = true;
      } else {
        this.isEcharts = false;
      }
    },

    // 温湿度统计分析
    humiture() {
      // humiture().then((res) => {
      //   if (res.code == 200) {
      //     this.hum = res.data;
      //   }
      // });
    },
    energySys2() {
      // 当日水能消耗
      var myDate = new Date();
      getEnergyDay({
        startTime: this.parseTime(myDate, "{y}-{m}-{d}") + " 00:00:00",
        stopTime: this.parseTime(myDate, "{y}-{m}-{d} {h}:{i}:{s}"),
      }).then((res) => {
        if (res.code == 200) {
          // console.log(res)
          this.mhsjfxData[2].num = res.data.dayWater
            .toFixed(2)
            .toString()
            .split("");
        }
      });

      // 当月水能消耗
      getEnergyMonth({
        startTime: this.$getMonth("s") + " 00:00:00",
        stopTime: this.$getMonth("e") + " 23:59:58",
      }).then((res) => {
        if (res.code == 200) {
          this.mhsjfxData[3].num = res.data.monthWater
            .toFixed(2)
            .toString()
            .split("");
        }
      });
    },
    // 能耗数据分析
    energySys() {
      //当日电能消耗
      electricDay().then((response) => {
        let temp = Number(response.data).toFixed(0);
        this.mhsjfxData[0].num = temp;
      });
      //当月电能消耗
      electricMonth().then((response) => {
        let temp = Number(response.data).toFixed(2);
        this.mhsjfxData[1].num = temp.toString().split("");
      });
      SafeP(101).then((res) => {
        if (res.code == 200) {
          this.safeDate = res.data.toString().split("");
        } else {
          this.safeDate = ["0"];
        }
      });
      // getNHSJ(this.left5Form).then((res)=>{
      //   let arr = res.data;
      //   if(arr.length == 2){
      //     for(let i=0;i<2;i++){
      //       this.mhsjfxData[i + 2].num = arr[i].toString().split("");
      //     }
      //   }
      // });
    },
    //获取设备列表
    getList() {
      list(
        "Productionline/interfaceTag/getDev?total=0&pageNum=1&pageSize=300",
        "GET"
      ).then((res) => {
        this.centerId = res.rows[0].id;
        this.$refs.psNameSelect.value = res.rows[0].dev;
        this.getVal();
        this.menus = res.rows;
        this.menusIndex = 0;
        if (this.timer) {
          clearInterval(this.timer);
        }
        this.timer = setInterval(() => {
          if (this.menusIndex < this.menus.length - 1) {
            this.menusIndex++;
          } else {
            this.menusIndex = 0;
          }
          this.$refs.psNameSelect.value = this.menus[this.menusIndex].dev;
          this.centerId = this.menus[this.menusIndex].id;
          this.getVal();
        }, 10000);
      });
    },
    //电力仪表监控分析
    getVal() {
      GetVal(this.centerId).then((res) => {
        if (res.length != 0) {
          this.center = res;
        } else {
          this.center = [
            { type: "总有功功率", value: 0 },
            { type: "总无功功率", value: 0 },
            { type: "总无功功率", value: 0 },
            { type: "功率因数", value: 0 },
          ];
        }
      });
    },
    //选择器改变
    selectList1(e) {
      this.centerId = e;
      this.getVal();
      if (this.timer) {
        clearInterval(this.timer);
      }
      for (let i = 0; i < this.menus.length; i++) {
        if (this.centerId == this.menus[i].id) {
          this.menusIndex = i;
        }
      }
      this.timer = setInterval(() => {
        if (this.menusIndex < this.menus.length - 1) {
          this.menusIndex++;
        } else {
          this.menusIndex = 0;
        }
        this.$refs.psNameSelect.value = this.menus[this.menusIndex].dev;
        this.centerId = this.menus[this.menusIndex].id;
        this.getVal();
      }, 10000);
    },
    radioChange(e) {
      this.left1Form.ksrq = e[0];
      this.left1Form.jsrq = e[1];
      this.productionProcess();
    },
    //首页-七率统计分析
    productionProcess() {
      ProductionProcess(this.left1Form).then((res) => {
        if (res.code == 200) {
          for (let index in res.data) {
            this.left1[index].pp = res.data[index].pp;
            this.left1[index].pg = res.data[index].pg;
            this.left1[index].sb = res.data[index].sb;
          }
        }
      });
    },
    //首页-产量统计
    productRecordCount() {
      ProductRecordCount().then((res) => {
        if (res.code == 200) {
          // this.left2.dayBotleCount = res.data.dayBotleCount
          //   .toString()
          //   .split("");
          this.left2.monthBoxCount = res.data.data.monthBoxCount
            .toString()
            .split("");
          this.left2.monthWaterUseCount = res.data.data.monthWaterUseCount
            .toString()
            .split("");
        }
      });
    },
    //首页-产量统计-当日产量箱
    getBoxDay() {
      GetBoxDay().then((res) => {
        if (res.code == 200) {
          this.left2.dayBotleCountPing = res.data.bottle.toString().split("");
          //  this.left2.dayBotleCountPing = res.data.bottle.toString().split("");
          // let number = parseInt(res.data.bottle / 24)
          // .toString()
          // .split("");
          // this.left2.dayBotleCountPing = number;
        }
      });
    },
    //首页-产量统计-当日产量瓶
    getBottleDay() {
      GetBottleDay().then((res) => {
        if (res.code == 200) {
          this.left2.dayBotleCount = res.data.bottle.toString().split("");
          // let number = parseInt(res.data.bottle / 24)
          //   .toString()
          //   .split("");
          // this.left2.dayBotleCountPing = number;
        }
      });
    },
    //首页-生产计划进度分析
    productPlanCount() {
      ProductPlanCount().then((res) => {
        if (res.code == 200) {
          this.left3.monthRate = Number(
            res.data.monthRate.replace("%", "")
          ).toFixed(0);
          this.left3.quarterRate = Number(
            res.data.quarterRate.replace("%", "")
          ).toFixed(0);
          this.left3.allRate = Number(
            res.data.allRate.replace("%", "")
          ).toFixed(0);
        }
      });
    },
    //首页-产线设备监控分析
    getTag() {
      getTag().then((res) => {
        this.right3 = res;
      });
    },
    //首页-温湿度监控
    getRealWsd() {
      getRealWsd().then((res) => {
        this.arr = res;
      });
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.myMain {
  align-items: flex-end;
  display: flex;
  .box_l,
  .box_c,
  .box_r {
    width: 24vw;
    height: 98.9%;
    position: relative;
    top: -1%;
    overflow: hidden;
    .Echarts {
      width: 100%;
      height: calc(100% - 52px);
      // margin-top: 1vh;
      //  background: red;
      .item {
        width: 33%;
        float: left;
      }
    }
    .scjhjd_box {
      width: 100%;
      height: 100%;
      .yibiaopan {
        width: 230px;
        height: 116px;
        border-radius: 120px 120px 0 0;
        // overflow: hidden;
        position: relative;
        .yibiaopan_bg {
          height: 80px;
          background: rgba(255, 206, 0);
          position: absolute;
          left: 40px;
          bottom: 4px;
        }
        img {
          width: 234px;
          height: 116px;
          position: relative;
          left: -2px;
          top: -2px;
          z-index: 1;
        }
        .yibiaopan_nummber {
          width: 100%;
          text-align: center;
          position: absolute;
          bottom: 0;
          z-index: 2;
          font-size: 30px;
        }
        .type {
          width: 100%;
          text-align: center;
          font-size: 11px;
          color: #00ffd3;
          margin-top: -5px;
          transform: scale(0.9);
        }
      }
      .water_box {
        width: 70%;
        padding: 0 20px;
        // background: red;
        height: 80px;
        margin-top: 35px;

        .water_box_item {
          position: relative;
          .water_box_item_bg {
            width: 80px;
            height: 80px;
            background-size: 100% 100%;
            background-image: url("~@/assets/images/echarts/shuibj1.png");
            // background: red;
          }
          .water_box_item_bg2 {
            background-image: url("~@/assets/images/echarts/shuibj2.png");
          }
          .water_box_item_bg3 {
            background-image: url("~@/assets/images/echarts/shuibj3.png");
          }
          .type {
            width: 100%;
            text-align: center;
            font-size: 11px;
            color: #00ffd3;
            margin-top: 5px;
            transform: scale(0.9);
          }
        }
      }
      @media screen and (max-width: 1000px) {
        .yibiaopan {
          width: 170px;
          height: 85px;
          .yibiaopan_bg {
            height: 60px;
            left: 30px;
            bottom: 4px;
          }
          img {
            width: 170px;
            height: 85px;
            left: -2px;
            top: -2px;
          }
          .yibiaopan_nummber {
            width: 100%;
            bottom: 0;
            z-index: 2;
            font-size: 23px;
          }
          .type {
            width: 100%;
            text-align: center;
            font-size: 15px;
            color: #00ffd3;
            margin-top: -5px;
          }
        }
        .water_box {
          height: 70px;
          // width: 100%;
          padding: 5px;
        }
        .water_box_item {
          top: 2px;
          // margin-left: 5px;
          .water_box_item_bg {
            width: 80px !important;
            height: 80px !important;
          }
          .type {
            font-size: 12px !important;
            margin-left: 1px;
          }
        }
      }
    }
    .dlybjk {
      margin-left: 2%;
      .dlybjk_bottom {
        width: 79px;
        height: 20px;
        font-size: 12px;
        color: #d4f0ff;
        text-align: center;
        line-height: 20px;
        margin: 15px auto;
        background-size: 100% 100%;
        background-image: url("~@/assets/images/echarts/zsx.png");
      }
      .zyg {
        width: 150px;
        height: 180px;
        // background-color: #fff;
        .zyg_top {
          width: 150px;
          height: 150px;
          color: #ffffff;
          text-align: center;
          line-height: 150px;
          font-size: 18px;
          background-size: 100% 100%;
          background-image: url("~@/assets/images/echarts/zyg.png");
        }
      }
      .zwg {
        width: 150px;
        height: 180px;
        // background-color: #fff;
        // margin: 0px 12%;
        .zwg_top {
          width: 150px;
          height: 150px;
          color: #ffffff;
          text-align: center;
          line-height: 150px;
          font-size: 18px;
          background-size: 100% 100%;
          background-image: url("~@/assets/images/echarts/zwg.png");
        }
      }
      .pl {
        width: 150px;
        height: 180px;
        .pl_top {
          width: 150px;
          height: 150px;
          color: #ffffff;
          text-align: center;
          line-height: 150px;
          font-size: 18px;
          background-size: 100% 100%;
          background-image: url("~@/assets/images/echarts/zyg.png");
        }
      }
    }
    @media screen and (max-width: 1000px) {
      .dlybjk {
        .dlybjk_bottom {
          width: 115px;
          height: 22px;
          line-height: 24px;
          // backgroundred;
          //  font-size: 12px;
        }
        .zyg {
          width: 120px;
          height: 135px;
          // background-color: #fff;
          .zyg_top {
            width: 120px;
            height: 120px;
            font-size: 17px;
            line-height: 120px;
          }
        }
        .zwg {
          width: 120px;
          height: 135px;
          // background-color: #fff;
          margin: 0px 5%;
          .zwg_top {
            width: 120px;
            font-size: 17px;
            height: 120px;
            line-height: 120px;
          }
        }
        .pl {
          width: 120px;
          height: 135px;
          .pl_top {
            width: 120px;
            height: 120px;
            font-size: 17px;
            line-height: 120px;
          }
        }
      }
    }
    .table {
      .table_cell {
        img {
          width: 10px;
          margin-top: -10px;
        }
      }
    }
    .cnfx_box {
      width: 82%;
      height: 30%;
      background: url("~@/assets/images/echarts/chanbig.png");
      background-size: 100% 100%;
      justify-content: flex-start;
      margin-bottom: 1.5%;
      img {
        width: 60px;
        margin: 0 12px;
      }
      .content {
        height: 100%;
        align-items: flex-start;
        margin-top: 23px;
        .title {
          font-size: 12px;

          color: #ffffff;
          margin-bottom: 2px;
          margin-left: 5px;
        }
        .number {
          font-family: SimHei, SimHei-Regular;
          font-weight: 400;
          font-size: 10px;
          height: 45px;
          display: flex;
          align-items: flex-end;
          margin-top: 5px;
          .p-number {
            width: 25px;
            height: 27px;
            text-align: center;
            line-height: 27px;
            /* 背景图片 */
            background: url("~@/assets/images/echarts/numbj.png");
            background-size: 100% 100%;
            list-style: none;
            margin-right: 2px;
            border-radius: 4px;
            font-size: 22px;
            // color: rgba(59, 255, 230, 1) !important;
          }
          .noborder {
            background: none;
            font-size: 14px;
            position: relative;
            width: auto;
            top: -5px;
          }
        }
      }
    }
    @media screen and (max-width: 1000px) {
      .cnfx_box {
        width: 100%;
        height: 24%;
        margin-bottom: 1.5%;
        padding-left: 10px;
        .content {
          margin-top: 25px;
          .number {
            margin-top: 0px;
          }
          .noborder {
            font-size: 12px !important;
          }
        }
        img {
          width: 55px;
          margin: 0 3px;
        }
      }
    }
    .wsd_box {
      width: 100%;
      height: 100%;
      padding: 13% 0;
      flex-wrap: wrap;
      .item {
        width: 200px;
        height: 70px;
        background: url("~@/assets/images/echarts/wsd.png");
        background-size: 100% 100%;
        padding: 0 6px 0 17px;
        .wsd_item_left {
          font-size: 12px;
          color: #ffffff;
        }
        .wsd_item_right {
          height: 100%;
          width: 45%;
          // background: red;
          // padding: 8px 0 0 0;
          align-items: center;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .wsd_item_right_item {
            height: 43%;
            .number {
              font-size: 18px;
              color: #3bffe6;
            }
            .title {
              font-size: 12px;
              color: #d4f0ff;
            }
          }
        }
      }
      .item:nth-child(even) {
        margin-left: 20px;
      }
      // .content {
      //   width: 350px;
      //   height: 240px;
      //   padding: 5px 0 5px 0;
      //   background: url("~@/assets/images/echarts/wendu.png");
      //   background-size: 100% 100%;
      //   .wsd_item {
      //     width: 100%;
      //     height: 50%;
      //     padding: 0 0px 0 63px;
      //     .wsd_item_left {
      //       font-size: 15px;
      //       color: #ffffff;
      //     }
      //     .wsd_item_right {
      //       height: 100%;
      //       width: 25%;
      //       padding: 8px 0 0 0;
      //       align-items: center;
      //       display: flex;
      //       flex-direction: column;
      //       justify-content: space-between;
      //       .wsd_item_right_item {
      //         height: 43%;
      //         display: flex;
      //         flex-direction: column;
      //         // justify-content: center;
      //         align-items: center;
      //         .number {
      //           font-size: 18px;
      //           color: #ffffff;
      //         }
      //         .title {
      //           font-size: 12px;
      //           color: #d4f0ff;
      //         }
      //       }
      //     }
      //   }
      // }
      @media screen and (max-width: 1000px) {
        .item {
          width: 135px;
          height: 60px;
          background: url("~@/assets/images/echarts/wsd.png");
          background-size: 100% 100%;
          padding: 5px 6px 5px 12px;
          .wsd_item_left {
            font-size: 12px;
            color: #ffffff;
          }
          .wsd_item_right {
            height: 100%;
            width: 45%;
            .wsd_item_right_item {
              height: 43%;
              justify-content: flex-end;
              .number {
                font-size: 14px;
                color: #3bffe6;
              }
              .title {
                font-size: 12px;
                color: #d4f0ff;
              }
            }
          }
        }
        .item:nth-child(even) {
          margin-left: 6px;
        }
      }
    }
    .nhsj_item {
      width: 100%;
      height: 30%;
      padding: 0 0 0 2%;
      margin-bottom: 0%;
      align-items: flex-end;
      justify-content: flex-start;
      .img_box {
        width: 44%;
        height: 34px;
        background: url("~@/assets/images/echarts/tabl@2x.png");
        display: flex;
        align-items: flex-end;
        background-size: 100% 100%;
        img {
          width: 50px;
          position: relative;
          top: 12px;
          opacity: 0.8;
        }
        .title {
          font-size: 14px;
          line-height: 28px;
          position: relative;
          top: 0px;
          color: #ffffff;
        }
      }
      .nhsj_item_right {
        display: flex;
        position: relative;
        top: 24px;
        align-items: center;
        .p-number {
          width: 24px;
          height: 42px;
          text-align: center;
          line-height: 42px;
          /* 背景图片 */
          background: url("~@/assets/images/echarts/numbj2.png");
          background-size: 135% 125%;
          background-position: center;
          list-style: none;
          margin-right: 6px;
          border-radius: 4px;
          color: #ffffff;
          font-size: 24px;
          // color: rgba(59, 255, 230, 1) !important;
        }
        .noborder {
          background: none;
          font-size: 14px;
          // position: relative;
          width: auto;
          // top: 10px;
          // font-size: 30px;
        }
        .unit {
          font-size: 12px;
          color: #00ffd3;
          position: relative;
          top: 12px;
          left: 4px;
        }
      }
    }
    @media screen and (max-width: 1000px) {
      .nhsj_item {
        padding: 0 0 0 2%;
        margin-top: 1%;
        height: 23%;
        .img_box {
          width: 32%;
          height: 28px;
          img {
            top: 8px;
            width: 34px;
          }
          .title {
            font-size: 12px;
            top: 4px;
            left: 10px;
          }
        }
        .nhsj_item_right {
          top: 20px;
          .p-number {
            width: 16px;
            height: 30px;
            line-height: 32px;
            font-size: 20px;
            margin-right: 3px;
            // color: rgba(59, 255, 230, 1) !important;
          }
          .noborder {
            line-height: 45px;
            width: 6px;
          }
          .unit {
            top: 6px;
          }
        }
      }
    }
    .dyyctj_box {
      width: 100%;
      height: 100%;
      .dyyctj_content {
        margin-top: 10px;
        width: 342px;
        height: 220px;
        background: url("~@/assets/images/echarts/tuxing.png");
        background-size: 100% 100%;
        position: relative;
        .center_img {
          position: absolute;
          width: 80px;
          height: 80px;
          left: 50%;
          top: 50%;
          margin-left: -40px;
          margin-top: -40px;
        }
        .dyyctj_item {
          width: 49%;
          height: 48%;
          // background: red;
          position: relative;
          z-index: 2;
          float: left;
          img {
            width: 26px;
            height: 26px;
            position: absolute;
            left: 14px;
            top: 14px;
          }
          .bottom {
            top: 60px;
          }
          .dyyctj_item_content {
            width: 60%;
            height: 70%;
            // background: red;
            margin: 14px 0 0 42px;
            .title {
              font-size: 14px;
              color: #ffffff;
            }
          }
        }
        .dyyctj_item_odd {
          margin: 0 2% 2% 0;
        }
      }
      @media screen and (max-width: 1200px) {
        .dyyctj_content {
          margin-top: 10px;
          width: 400px;
          height: 257px;
        }
      }
    }
    .statusBox {
      width: 100%;
      // height: calc(100% - 0px);
      height: 100%;
      padding: 0.5vh 0 0.5vh;
      // background: red;
      // display: -webkit-box;
      // -webkit-overflow-scrolling: touch;
      display: flex;
      // overflow-x: auto;
      overflow: hidden;
      .item {
        margin-top: 6%;
        flex-shrink: 0;
        width: 30%;
        // float: left;
      }
    }
    @media screen and (max-width: 1000px) {
      .statusBox {
        .item {
          margin-left: 10px;
        }
      }
    }
  }
  .box_c {
    width: 49.5vw;
    height: 98.9%;
    margin: 0 0.6vw;
    .day-box {
      width: 500px;
      height: 54px;
      position: absolute;
      top: 5px;
      z-index: 1000;
      background: url("../../assets/images/echarts/day.png");
      background-size: 100% 100%;
      left: 50%;
      margin-left: -250px;
      span {
        font-family: Source Han Sans CN, Source Han Sans CN-Medium;
        font-weight: 500;
        text-align: left;
        color: #00ffd3 !important;
        font-size: 22px;
        // line-height: 2px;
      }
      .number-box {
        margin: 0 10px 0 25px;
        p {
          float: left;
          background: url("../../assets/images/echarts/day-bj.png");
          background-size: 100% 100%;
          width: 22px;
          height: 38px;
          margin-left: 5px;
          text-align: center;
          line-height: 42px;
          font-size: 25px;
          position: relative;
          top: -3px;
          color: #ffffff;
        }
      }
    }
    .mapInfo {
      width: 300px;
      min-height: 300px;
      // background: red;
      background: url("../../assets/images/map.png");
      background-size: 100% 100%;
      position: absolute;
      right: 10px;
      z-index: 10000;
      bottom: 10px;
      .top {
        width: 100%;
        height: 40px;
        // background: red;
        padding: 8px 15px;
        position: relative;
        nav {
          font-size: 16px;
          color: #ffffff;
        }
        .border {
          width: 100%;
          position: relative;
          top: -5px;
        }
        .close {
          position: absolute;
          right: 15px;
          font-size: 16px;
          top: 11px;
          opacity: 0.8;
          cursor: pointer;
          color: #ffffff;
        }
      }
      .content {
        //  width: 100%;
        height: 250px;
        overflow: auto;
        // background: red;
        padding: 0px 15px;
        // position: relative;
        .label {
          padding: 2px 3px;
          background: none;
          border: 1px solid rgba(255, 255, 255, 95);
          border-radius: 10px;
          text-align: center;
          // line-height: 0;
          font-size: 12px;
          color: rgba(255, 255, 255, 95);
          position: relative;
          top: -5px;
          flex-direction: column;
        }
        .value {
          font-size: 12px;
          color: #01f0ff;
          position: relative;
          top: -10px;
        }
        .imgInfo {
          width: 260px;
        }
      }
    }
  }
  .box_l {
    overflow-x: hidden;
    .cont_box {
      width: 80%;
      margin-left: 10%;
      height: 80px;
      // margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 10;
      span {
        font-size: 20px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        color: #feffff;
        margin-right: 25px;
        position: relative;
        z-index: 10;
      }
      .btm {
        position: absolute;
        width: 100%;
        bottom: 0;
        z-index: 1;
      }
      .percentage_box {
        height: 32px;
        font-size: 32px !important;
        position: relative;
        z-index: 10;
        color: #ff4a4a;
        display: flex;
        align-items: flex-start;
        .jiang {
          width: 20px;
        }
      }
    }
  }
  .box_r {
    .sel_box {
      display: flex;
      button {
        height: 28px;
        font-size: 14px;
        font-family: Adobe Heiti Std, Adobe Heiti Std-R;
        text-align: left;
        line-height: 10px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #1579bb;
        border: none;
        margin-right: 5px;
        padding-right: 7px;
        border: 1px solid #1579bb;
        color: #d4f0ff;
        cursor: pointer;
        img {
          width: 12px;
          height: 14px;
          margin-right: 5px;
        }
      }
      .button_active {
        background: #2a9dbb;
        color: #ffffff;
        border: 1px solid #00ffff;
      }
    }
  }
}
</style>
<style lang="scss">
@media screen and (max-width: 1000px) {
  .table {
    transform: scale(0.6);
    width: 160% !important;
    margin-left: -30%;
    margin-top: -16px;
  }
  .size {
    .el-table .cell {
      font-size: 19px;
    }
  }
}
</style>

